import React from "react"
import {connect,} from 'react-redux'
import AppLayout from "../../layouts/AppLayout"
import './game.css'
import './Football/Football.css'
import Football from "./Football/Football"
import DownloadHint from "../../shared-components/DownloadHint/DownloadHint"
import {GlobalStore} from "../../context";
import LocalStorageService from "../../utils/LocalStorageService";
import {behaviorReq} from "../../apis/goApis";
import TabWithCustomUnderline from "../../layouts/TabWithCustomUnderline/TabWithCustomUnderline";
import Basketball from "./Basketball/Basketball";
import OrderIcon from "../../../src/res/images/web/game/方案@2x.png"
import HistoryIcon from "../../../src/res/images/web/game/历史@2x.png"
import FilterIcon from "../../../src/res/images/web/game/筛 选@2x.png"

class GameContainer extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            downloadShow: true,
            positions: [0, 0, [0, 3],],
            basketballAtFollow: false,
            curBasketballList: [],
        }
    }

    componentDidMount() {
        this.AIBuy = this.context.user.AIBuy
        this.setDownloadShow()
        this.setTabPosition()
    }

    setDownloadShow = () => {
        const downloadShow = this.context.downloadApp.show
        this.setState({
            downloadShow,
        })
    }

    setTabPosition = () => {
        const positions = this.context.gamePagePosition.positions
        this.setState({
            positions: positions,
        })
    }

    hidden = () => {
        this.context.downloadApp.hidden()
        this.setState({
            downloadShow: false,
        })
    }

     onFocus = () => {
        this.props.history.push('./search')
    }

    goToAi = () => {
        this.context.user.setAIBuy(false)
        this.props.history.push('./my-ai')
    }

    goToMyPlan = () => {
        // this.context.user.setAIBuy(false)
        this.props.history.push('./my_plan')
    }

    render() {

        const {
            history,
            tabPosition,
        } = this.props

        const ps = this.state.positions
        const atFootball = ps[0] === 0
        const atBasketball = ps[0] === 1

        const tabAtFollow = (tabPosition[1] === 4 && atFootball) || (atBasketball && this.state.basketballAtFollow)
        const filterIcon = <div
            className='game-look-back'
            style={{
                right: '16px',
            }}
            onClick={() => {
                const isLogin = LocalStorageService.get('userid')
                if (isLogin) {
                    behaviorReq({
                        userid: LocalStorageService.get('userid'),
                        handle: atFootball ? '足球筛选' : '篮球筛选',
                    })
                }
                if (tabAtFollow) {
                    history.push(atFootball ? './history' : './history-basketball')
                } else {
                    if (this.state.positions[0] === 0) {
                        history.push('./game-filter')
                    } else {
                        history.push('./game-filter-basketball', {list: this.state.curBasketballList,})
                    }
                }
            }}
        >
            {tabAtFollow
                ? <img src={HistoryIcon} alt='' style={{width: 20, height: 20,}}/>
                : <img src={FilterIcon} alt='' style={{width: 20, height: 20,}}/>
            }
            {/*<span>{tabAtFollow ? '历史' : '筛选'}</span>*/}
        </div>

        const download = this.state.downloadShow
        // const download = this.context.downloadApp.show
        // const download = this.props.downloadShow
        // console.log(download)
        return (
            <AppLayout>
                {download ? <DownloadHint onHidden={this.hidden}/> : null}

                <div
                    style={{
                        height: download
                            ? document.documentElement.clientHeight - 50 - 60
                            : document.documentElement.clientHeight - 50,
                        position: 'relative',
                    }}
                >

                    <div
                        className='game-look-back'
                        onClick={this.goToMyPlan}
                        style={{
                            left: '16px',
                        }}
                    >
                        {/*<span>方案</span>*/}
                        <img
                            src={OrderIcon}
                            alt=''
                            style={{
                                width: 20,
                                height: 20,
                            }}
                        />
                    </div>

                    {filterIcon}

                    <TabWithCustomUnderline
                        prefixCls='home-tab'
                        tabs={[
                            {title: '足球',},
                            {title: '篮球',},
                            // {title: '电竞',},
                        ]}
                        tabBarUnderlineStyle={{
                            width: '20%',
                            borderRadius: '0',
                            background: '#36C8B9',
                        }}
                        tabBarBackgroundColor='#213A4B'
                        animated={false}
                        tabBarActiveTextColor='#FFFFFF'
                        page={this.state.positions[0]}
                        onTabClick={(tab, index) => {
                            const ps = this.state.positions
                            ps[0] = index
                            this.setState({
                                positions: [...ps],
                            })
                        }}

                    >
                        <Football
                            downloadShow={download}
                        />
                        <Basketball
                            downloadShow={download}
                            setAtBasketballFollow={(value) => {
                                this.setState({
                                    basketballAtFollow: value,
                                })
                            }}
                            setCurBasketballList={(list) => {
                                this.setState({
                                    curBasketballList: list,
                                })
                            }}
                        />
                        {/*<VideoGame />*/}
                    </TabWithCustomUnderline>
                </div>


            </AppLayout>
        )

    }

}

GameContainer.contextType = GlobalStore

const mapState = state => ({
    tabPosition: state.game.tabPosition,
    games: state.game.games,
    today: state.game.today,
})

const mapDispatch = dispatch => ({
    doFetchGameList: (payload) => dispatch.game.doFetchGameList(payload),
    doFetchGameListAll: () => dispatch.game.doFetchGameListAll(),
})

export default connect(mapState, mapDispatch)(GameContainer)


